<!--
 * @Description: 成本管理报表
 * @Author: wind-lc
 * @version: 1.0
 * @Date: 2024-03-26 14:58:06
 * @LastEditTime: 2024-04-02 15:14:20
 * @FilePath: \cscec-pms-admin\src\views\businessAffairs\businessCostPlanManagement\costManagementReport\index.vue
-->

<template>
  <base-breadcrumb>
    <a-spin :spinning="exporting">
      <searchData
        :search-data="searchOption"
        @search="search"
      />
      <a-card>
        <list-table
          ref="table"
          row-key="id"
          :columns="columns"
          :request="loadData"
          :page-keys="['pageNum', 'pageSize', 'total']"
          :alert="true"
          show-size-changer
          show-quick-jumper
          :isEmptyWidth="true"
          :scroll="{x: true}"
          :outSelectedRowKeys.sync="selectedRowKeys"
          :selectConfig="{use: true, type: 'checkbox',rowKey: 'id' }"
          :isShowColumnFilter="false"
          :isShowTable="true"
        >
          <a-button
            slot="prefix"
            class="mb12"
            icon="download"
            type="primary"
            :disabled="selectedRowKeys.length === 0"
            @click="handleSelectedExport"
          >选中导出</a-button>
          <a-button
            slot="prefix"
            class="mb12"
            icon="download"
            type="primary"
            @click="handleAllExport"
          >导出全部</a-button>
        </list-table>
      </a-card>
    </a-spin>
  </base-breadcrumb>
</template>
<script>
import { searchOption, columns } from './model.js'
import { list, listExport } from '@/api/businessAffairs/costManagementReport'
export default {
  name: 'costManagementReport',
  components: {},
  data() {
    return {
      // 搜索项
      searchOption,
      // 查询参数
      searchData: {},
      //表头
      columns: this.$clone(columns),
      // 选中行id
      selectedRowKeys: [],
      // 导出中
      exporting: false
    }
  },
  mounted() {
    // console.log(
    //   columns.reduce((t, c) => {
    //     console.log(c.width)
    //     return t + (typeof c.width === 'number' ? c.width : 0)
    //   }, 0)
    // )
  },
  methods: {
    /**
     * @description: 搜索
     * @param {object} value 搜索数据
     * @return {void}
     */
    search(value) {
      this.searchData = value || {}
      this.$refs.table.refresh(true)
    },
    /**
     * @description: 表格数据加载
     * @param {object} parameter 分页信息
     * @return {void}
     */
    async loadData(parameter) {
      try {
        return await list({ ...parameter, param: this.searchData })
      } catch (error) {
        console.log(error)
        return Promise.reject(error)
      }
    },
    /**
     * @description: 下载
     * @return {void}
     */
    handleDownload(res) {
      const blob = new Blob([res.data])
      const filename = decodeURIComponent(res.headers['content-disposition'].split('filename=')[1])
      const downloadElement = document.createElement('a')
      const href = window.URL.createObjectURL(blob) // 创建下载的链接
      downloadElement.href = href
      downloadElement.download = filename // 获取文件名
      document.body.appendChild(downloadElement)
      downloadElement.click() //点击下载
      document.body.removeChild(downloadElement) //下载完成移除元素
      window.URL.revokeObjectURL(href) //释放blob对象
      this.exporting = false
    },
    /**
     * @description: 选中导出
     * @return {void}
     */
    handleSelectedExport() {
      this.exporting = true
      listExport({
        pageNum: 1,
        pageSize: 9999,
        param: {
          ...this.searchData,
          selectList: this.selectedRowKeys,
          fieldsList: this.$refs.table.filterColumn.map(el => {
            if(el.title === '序号'){
              return 'index'
            }else{
              return el.dataIndex
            }
          })
        }
      })
        .then((res) => {
          this.handleDownload(res)
        })
        .catch((err) => {
          console.log(err)
          this.exporting = false
        })
    },
    /**
     * @description: 全部导出
     * @return {void}
     */
    handleAllExport() {
      this.exporting = true
      listExport({
        pageNum: 1,
        pageSize: 9999,
        param: {
          ...this.searchData,
          fieldsList: this.$refs.table.filterColumn.map(el => {
            if(el.title === '序号'){
              return 'index'
            }else{
              return el.dataIndex
            }
          })
        }
      })
        .then((res) => {
          this.handleDownload(res)
        })
        .catch((err) => {
          console.log(err)
          this.exporting = false
        })
    }
  }
}
</script>
<style lang="less" scoped>

</style>
